<template>
	<view>

		<view class="header">
			<!-- zuo -->
			<view class="content">
				<view class="image">
					<image class="img" src="../../static/fx.png" mode=""></image>
				</view>
				<view class="cont">
					<text class="txt1">{{user.phone}}</text>
				</view>
			</view>
			<!-- you -->
			<view class="content1" v-if="user.roleId==2">
				<text class="txt1">已开通会员</text>
				<text class="txt2">会员有效期至2023-10-8</text>
			</view>
			<view class="content1" v-else>
				<text class="txt1">已开通会员</text>
				<text class="txt2">会员有效期至2023-10-8</text>
			</view>
		</view>

		<swiper class="swiper-container" :autoplay="false" :duration="500" :circular="true"
			:previous-margin="prevMargin" :next-margin="nextMargin" @change="change">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image :src="item.img" class="img"></image>
				<view class="swiper-item" :style="{ background: item.sty }">
					<view class="swiper-card" :class="idex" v-for="(card,idex) in item.cards" :key="idex">
						<text v-for="(text, idx) in card.texts" :key="idx" class="swiper-text"
							:class="card.styles[idx]">{{ text }}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="consit">
			<text class="title">会员专属权益</text>
			<view class="cardFour">
				<view class="card" v-for="(item,index) in card" :key="index">
					<view class="content">
						<view class="cot"><text class="txt1">{{item.title}}</text>
							<view class="zx" v-show="index == 0">专享</view>
						</view>
						<text class="txt2">{{item.jie}}</text>
					</view>
					<view class="image">
						<image class="img" :src="item.url" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="con">
			<text class="title">会员额外专享权益</text>
			<view class="cardTwo">
				<view class="content">
					<text class="txt1">专属会员商品</text>
					<text class="txt2">每月15号，专属商品低折扣</text>
					<button class="btn">了解更多</button>
				</view>
				<view class="content content-right">
					<text class="txt1">下单免费扔</text>
					<text class="txt2">生活垃圾免费代扔</text>
					<button class="btn1">前去下单</button>
				</view>
			</view>
		</view>
		<view class="conse">
			<view class="container" @click="pay">
				<view class="left-container">
					<view class="gradient-bg"></view>
					<text class="price-big">￥{{yuan}}</text>
					<text class="price-small">/月</text>
					<view class="trapezoid">
						<text class="price-white">￥{{yiqyuan}}</text>
						<view class="line"></view>
					</view>
					<view class="right-container">
						<text class="promote-text">开通立省</text>
					</view>
				</view>

			</view>



		</view>
	</view>

	</view>
</template>

<script>
	import OrderApi from '@/common/FindingService/OrderApi.js';
	export default {
		data() {
			return {
				swiperList: [{
						cards: [{
								texts: ['拾一块月卡会员', '开通会员立即省钱'],
								styles: ['style1', 'style2'],
							},
							{
								texts: ['标准版:9.9/月', '立即开通'],
								styles: ['style3', 'style4']
							}
						],
						sty: '#c9beac',
						img: '../../static/vip2.png'
					},

					{
						cards: [{
							texts: ['拾一块季卡会员', '开通会员立即省钱'],
							styles: ['style1', 'style2']
						}, {
							texts: ['标准版:29.9/季', '立即开通'],
							styles: ['style3', 'style4']
						}],
						sty: '#c0c8d7',
						img: '../../static/vip2.png'
					},

					{
						cards: [{
							texts: ['拾一块年卡会员', '开通会员立即省钱'],
							styles: ['style1', 'style2']
						}, {
							texts: ['标准版:229.9/年', '立即开通'],
							styles: ['style3', 'style4']
						}],
						sty: '#e4c8c4',
						img: '../../static/vip2.png'
					}
				],
				timeEnd: '',
				prevMargin: '50rpx',
				nextMargin: '50rpx',
				card: [{
						title: '免费代扔',
						jie: '生活垃圾，免费代扔',
						url: '../../static/shan.png'
					},
					{
						title: '快速咨询',
						jie: '快速咨询，迅速响应',
						url: '../../static/jl.png'
					},
					{
						title: '会员专享',
						jie: '享受会员超低折扣',
						url: '../../static/sc.png'
					},
					{
						title: '尊贵标识',
						jie: '独特的会员图标',
						url: '../../static/VIP11.png'
					}
				],
				huiyuan: '月',
				yuan: 9.9,
				yiqyuan: 19.9,
				selector1Selected: true,
				userId: '',
				user: '',
			};
		},
		mounted() {
			this.userId = uni.getStorageSync('userId');
			//加载用户
			OrderApi.queryUser(this.userId).then(res => {
				this.user = res.data.data
				console.log('this.user', this.user);


			})

		},
		methods: {
			pay() {
				console.log('e', this.yuan);
				//购买VIP



				OrderApi.payVip(this.userId, this.yuan).then(res => {

					console.log('购买VIP', res)

				})

			},
			change(e) {
				console.log(e);
				this.selector1Selected = true;
				switch (e.detail.current) {
					case 0: {
						this.huiyuan = '月';
						this.yuan = 9.9;
						this.yiqyuan = 19.9
					}
					break;
					case 1: {
						this.huiyuan = '季';
						this.yuan = 25.9;
						this.yiqyuan = 58.9
					};
					break;
					case 2: {
						this.huiyuan = '年';
						this.yuan = 109.9;
						this.yiqyuan = 229.9
					};
					break;
				}
			},
			goToBack() {
				uni.navigateTo({
					url: '/pages/my/my'
				})
			},
			selectSelector(num) {
				if (num == 1 && this.selector1Selected == true) {
					this.selector1Selected = true;
				} else if (num == 1 && this.selector1Selected == false) {
					this.selector1Selected = true;
					if (this.huiyuan == '月') {
						this.yuan = 9.9;
						this.yiqyuan = 19.9
					} else if (this.huiyuan == '季') {
						this.yuan = 25.9;
						this.yiqyuan = 58.9;
					} else if (this.huiyuan == '年') {
						this.yuan = 109.9;
						this.yiqyuan = 229.9;
					}
				} else {
					this.selector1Selected = false;
					if (this.huiyuan == '月') {
						this.yuan = 59.9;
						this.yiqyuan = 147;
					} else if (this.huiyuan == '季') {
						this.yuan = 159;
						this.yiqyuan = 441;
					} else if (this.huiyuan == '年') {
						this.yuan = 636;
						this.yiqyuan = 1764;
					}
				}

			},

		}
	};
</script>
`
<style lang="scss" scoped>
	//顶部标题
	.content-title {
		background-color: #fff;
		color: #000;
		font-weight: bold;
		height: 100rpx;
		position: relative;
		font-size: 16px;

		.title-left {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.title-right {
			text-align: center;
			line-height: 100rpx;
		}
	}

	.header {
		width: 100vw;
		height: 25vh;
		background-color: #343434;
		border: 1px solid #ccc;
		border-radius: 0 0 200rpx 200rpx;
		display: flex;
		padding-top: 100rpx;
		padding-left: 80rpx;

		.content {
			display: flex;
			height: 100rpx;
			margin-right: 20rpx;

			.image {
				width: 100rpx;
				height: 100rpx;
				border: 1px solid #000;
				border-radius: 50rpx;
				margin-right: 10rpx;
				background-color: white;

				.img {
					width: 100%;
					height: 100%;
				}
			}


			.cont {
				display: flex;
				flex-direction: column;
				align-items: center;
			}


		}

		.content1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			/* justify-content: center; */
		}

		.txt1 {
			color: white;
			font-size: 34rpx;
			margin-bottom: 10rpx;
			line-height: 100rpx;
		}

		.txt2 {
			color: white;
		}


	}


	.swiper-container {
		width: 100%;
		height: 300rpx;
		/* 替换为你希望的高度 */
		position: relative;
		top: -110rpx;

		.img {
			width: 100rpx;
			height: 50rpx;
			position: absolute;
			top: 0;
			left: 0;
			margin-top: 30rpx;
			margin-left: 14rpx;
			border-radius: 0 20rpx 20rpx 0;
		}

		.swiper-item {
			width: 96%;
			height: 100%;
			margin: 0 auto;
			// text-align: center;
			border: 1px solid #343434;
			box-shadow: -1px -1px #55557f, 2rpx 2rpx 2rpx #808080;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;



			.swiper-card {
				display: flex;
				flex-direction: column;
				margin: 40rpx 30rpx;
				margin-top: 80rpx;
				
				.swiper-text{
					margin-top: 20rpx;
				}
			}

		}

		.style1 {
			font-size: 42rpx;
			color: #706b4f;
			font-weight: bold;
		}

		.style2 {
			color: #bb9969;
			font-weight: bold;
			font-size: 30rpx;

		}

		.style3 {
			color: #252426;
			// text-decoration: underline;
			font-size: 30rpx;
		}

		.style4 {
			font-size: 36rpx;
			margin-top: 10rpx;
			text-align: center;
			color: #b8a281;
			background-color: #625d3f;
			line-height: 60rpx;
			border-radius: 50rpx;
		}
	}

	.title {
		font-size: 41rpx;
		font-weight: bold;
	}

	.consit {
		margin-top: -30rpx;
		padding-left: 20rpx;
	}

	.cardFour {
		width: 100%;
		height: 30vh;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		align-content: flex-start;
		margin-bottom: 15rpx;
		overflow: hidden;
		
		.card {
			width: 46%;
			height: 200rpx;
			border: 1px solid #ddd;
			margin-right: 28rpx;
			margin-top: 20rpx;
			display: flex;
			padding: 10rpx;
			border-radius: 10rpx;
			box-shadow: -1px 1px #55557f, 4rpx 4rpx 16rpx #b3b3b3;
			
			.content {
				display: flex;

				flex-direction: column;
				padding: 10rpx;
				width: 250rpx;

				.cot {
					margin-bottom: 15rpx;
					display: flex;
					

					.txt1 {
						font-size: 30rpx;
					}

					.zx {
						margin-left: 10rpx;
						border-radius: 13rpx;
						color: white;
						border: 1px solid #aaa;
						background-color: orange;
					}
				}
			}

			.image {
				width: 90rpx;
				height: 80rpx;
				border: 1px solid #000;
				border-radius: 40rpx;
				margin: auto;
				margin-left: 15rpx;
				margin-right: 5rpx;
				background-color: white;
				overflow: hidden;
				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.con {
		margin-top: 30rpx;
		padding-left: 20rpx;

		.cardTwo {
			width: 100%;
			/* height: 10vh; */
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			align-content: flex-start;

			.content {
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				width: 45%;
				margin: 10rpx;
				height: 250rpx;
				border: 1px solid #000;
				background-color: orange;
				border-radius: 30rpx;
				box-shadow: -1px 1px #55557f, 4rpx 4rpx 16rpx #b3b3b3;
			}

			.content-right {
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				width: 45%;
				margin: 10rpx;
				height: 250rpx;
				border: 1px solid #000;
				border: 1px solid #000;
				background-color: #00557f;
				border-radius: 30rpx;
				box-shadow: -1px 1px #55557f, 4rpx 4rpx 25rpx #b3b3b3;
			}

			.txt1 {
				font-size: 34rpx;
				font-weight: bold;
				color: white;
			}

			.txt2 {
				font-size: 27rpx;
				color: white;
			}

			.btn {
				border: white;
				font-size: 26rpx;
				line-height: 60rpx;
			}

			.btn1 {
				border: white;
				font-size: 26rpx;
				line-height: 60rpx;
				position: relative;
				top: 35rpx;
			}

		}

	}

	.conse {
		position: sticky;
		bottom: 10rpx;
		width: 100%;
		z-index: 999999;
		padding-left: 20rpx;

		.content {
			margin-bottom: 20rpx;
			border-bottom: 1px solid #efefef;
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			padding-bottom: 20rpx;

			.cont {
				font-size: 36rpx;
				padding: 5rpx;
				font-weight: bold;

				.cont1 {
					font-weight: normal;
					margin-top: 12rpx;
					font-size: 32rpx;
				}
			}

			.cont2 {
				width: 60rpx;
				height: 60rpx;
				background-color: 20rpx;
				border-radius: 50%;
				border: 1px solid #333;
				margin: auto 20rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				.image {
					width: 40rpx;
					height: 40rpx;
				}

			}

			.selector-selected {
				background-color: green;
			}
		}
	}

	.container {
		margin-top: 20rpx;
		align-items: center;
		height: 100rpx;
		// height: 180rpx;


		.left-container {
			width: 990rpx;
			height: 100rpx;
			position: relative;
			display: flex;
			align-items: center;
			z-index: -1;
			padding: 20rpx;

			.gradient-bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(to right, gold, white);
				/* background-color:gold; */
				border-radius: 50rpx;
				z-index: -1;

			}

			.price-big {
				font-size: 50rpx;
				font-weight: bold;
				color: #333;
				margin-right: 5px;
			}

			.price-small {
				font-size: 14px;
				color: #333;
			}

			.trapezoid {
				position: relative;
				width: 80px;
				height: 30px;

				display: flex;
				align-items: center;
				justify-content: center;
			}

			.price-white {
				font-size: 18px;
				margin-right: 5px;
			}

			.line {
				width: 60px;
				height: 1px;
				background-color: #000000;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.right-container {
			width: 500rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			text-align: center;
			justify-content: center;
			background-color: #333;
			color: #fff;
			clip-path: polygon(0 0, 100% 0%, 80% 100%, 20% 100%);

			.promote-text {
				font-size: 48rpx;
			}
		}

	}
</style>